[Android アプリの UI デザイン] 画像リソースの種類を知る

AndroidアプリのUIデザイン

#Android

諏訪悠紀

2012.07.06

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

Androidアプリでは、デザインアセットいくつかの種類があります。例えば、アイコンなどのような画像を用意すれば済むものもあれば、ボタン背景など文字数によってスケールさせる必要があるものもあります。 Androidアプリで使用できるアセットの種類を知ることにより、そのデザインをどのように実装するとより効率的なのか理解することができ、開発とデザインとのやりとりがスムーズになります。ぜひ覚えていきましょう。

アセットの種類

ビットマップ

■ 概要

アイコンなどのアセットが該当します。 PNGやJPEGなどで作成された画像ファイルです。GIFファイルは推奨されていません。原則的に画面密度ごと(mdpi, hdpi, xhdpi)のファイルを用意する必要があります。 またXMLファイルを使用することによって、リピートするようなアセットも作成できます。

■ ファイル形式

PNGファイル, JPEGファイル, XMLファイル

■ ファイル例

Nine-Patch

■ 概要

ボタンや枠など、スケールする必要があるアセットが該当します。 Android独自の指定方法によって作成されたPNGファイルである必要があります。この指定方法によって、画像のどこがスケールするか指定します。ビットマップアセット同様、画面密度ごと(mdpi, hdpi, xhdpi)のファイルを用意する必要があります。 ディザリングを指定したい場合はXMLファイルを別途用意する必要があります。

■ ファイル形式

PNGファイル, XMLファイル

■ ファイル例

レイヤー

■ 概要

アセットとアセットを重ねあわせたアセットを作りたい場合に使います。画像自体は別々に用意し、重ね順を自由に設定することができます。重ね順を定義したXMLファイルを作成します。

■ ファイル形式

XMLファイル

■ ファイル例

ステート

■ 概要

ボタンなどのような、いくつかの状態(通常時, 押下時, 非活性時など)でアセットを切り替える必要があるアセットが該当します。「どの状態のときに、どのアセットを適用するか」という設定を定義した XMLファイルを作成します。

■ ファイル形式

XMLファイル

■ ファイル例

レベル

■ 概要

電池残量アイコンなど、あるレベルによってアセットを切り替える必要のあるアセットが該当します。アイコン自体は別々のアセットファイルとして用意し、「どのレベルでどのアセットを使うか」設定を定義するXMLファイルを作成します。

■ ファイル形式

XMLファイル

■ ファイル例

トランジション

■ 概要

2つのアセットをクロスフェードしたい場合に作成します。 2つのアセットを別途用意し、XMLファイルで定義します。例えば、有効/無効のアイコンをクロスフェードで切り替えることができます。

■ ファイル形式

XMLファイル

■ ファイル例

差し込み

■ 概要

特定の間隔を空け、アセットを描画させたいときに使用します。例えば、実際のアセットより上から10dp空けた状態で使いたいときなどに使います。「どれくらいの間隔を空けるか」設定を定義したXMLファイルを作成します。例えば、ボタンのタップ領域を広げたい場合などに使用できます。

■ ファイル形式

XMLファイル

■ ファイル例

クリップ

■ 概要

プログレスバーなどのようなレベルに応じて変化するアセットが該当します。一つのアセットファイルをレベルに応じて切り抜くようなアセットになります。「どのアセットをどこから切り抜くか」設定を定義したXMLファイルを作成します。

■ ファイル形式

XMLファイル

■ ファイル例

スケール

■ 概要

一つのアセットファイルをレベルに応じて拡大/縮小するアセットになります。「どのアセットをどこから拡大/縮小するか」設定を定義したXMLファイルを作成します。

■ ファイル形式

XMLファイル

■ ファイル例

Shape

■ 概要

単純な四角形や円などのアセットが該当します。枠の色、塗りつぶし色(グラデーションも可)、角丸などを指定できます。「どのような形を作るか」設定を定義したXMLファイルを作成します。画像で用意することも可能ですが、単純なものであればスケールさせる必要がある場合は Shapeアセットで作成したほうが手っ取り早い場合があるので、作りたいものに応じて使いわけるようにしましょう。